import React from "react";
import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {Route, withRouter} from "react-router-dom";
import {Bubble, List, Tools, Button,Picker} from "weaver-mobile";
import {BrowserHrm, RouteLayout, Browser} from "weaver-mobile-page";
import ScoreEdit from "./scoreEdit";
import {WrCardList} from "../../../public";
import {Empty} from "../../plan/coms";
import {openHrmCard} from "../../../util";
import ProgramItemDetail from "../programItem/detail";
const getLabel = Tools.getLabel;

/**
 * 我的考核方案-考核评分人
 */
@inject("programViewStore")
@withRouter
@observer
export default class scoreDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            path: this.props.location.pathname,
            datalist:[],
            options: [{value: "0",label: getLabel(15558, '依次逐个处理')},
                      {value: "1",label: getLabel(15557, '会签')}],
            scoreattr:["0"],
            scoreids:"",//当前编辑的评分人id集合
        };
        this.store = this.props.programViewStore;
    }

    componentWillMount() {
        const queryList = this.props.location.state
        if (queryList) {
            const {form:{accessScoreData}} = this.store;
            let datalist = [];
            let scoreids = queryList.showid;
            accessScoreData && accessScoreData.length>0 && accessScoreData.map((element,idx)=>{
                if(scoreids.indexOf(","+element.checkuserid+",")>-1){
                    datalist.push(element);
                }
            });
            this.setState({
                datalist: datalist,
                scoreids:scoreids,
                scoreattr:[queryList.showattr]
            })
        }
    }
    onPickChange(v){
        this.setState({scoreattr:v});
    }
    setDataList(v,id){
        let {datalist} = this.state;
        if(id===""){
            datalist.push({
                ...v,
                id: Math.random().toString(36).substr(3, 10)
            });
        }else{
            datalist.map(item => {
                if (item.id == id) {
                    item.checkuseridspan = v.checkuseridspan;
                    item.checkusername = v.checkusername;
                    item.checkuserid = v.checkuserid;
                    item.rate = v.rate;
                    item.templateid = v.templateid;
                    item.templatename = v.templatename;
                }
            })
        }
        this.setState({datalist:datalist});
    }
    render() {
        const {showStatus,updateScoreData} = this.store;
        const {datalist,options,scoreattr} = this.state;
        return (
            <div className="wm-route-layout workrelate-roll">
            <div className="roll workrelate-scoredetail-list">
                <List>
                <Picker
                    data={ options }
                    value={ scoreattr}
                    onChange={(v)=> this.onPickChange(v) }
                    cols={1}>
                    <List.Item arrow="horizontal">{getLabel(125351, '会签属性')}</List.Item>
                    </Picker>
                </List>
                <WrCardList
                    title={""}
                    full
                    hiddenHeader={!showStatus}
                    dataMapList={[{
                        fieldname: "checkuseridspan",
                        showname: getLabel(508672, "评分人"),
                        method: (data) => <span style={{color: "#4D7AD8"}}
                                                onClick={(e) => openHrmCard(data.checkuserid, e)}>{data.checkusername}</span>
                    }, {
                        fieldname: "rate",
                        showname: getLabel(6071, "权重")+ "(%)",
                    },{
                        fieldname: "templatename",
                        showname: getLabel('28050','模板名称') ,
                        method: (data) => <span style={{color: "#4D7AD8"}}
                                                onClick={(e) => {
                                                    this.props.history.push(this.state.path +"/template?id=" + data.templateid)
                                                    if (e) {
                                                        e.stopPropagation();
                                                        e.nativeEvent.stopImmediatePropagation();
                                                    }
                                                }}>{data.templatename}</span>
                    }]}
                    dataList={datalist}
                    showAdd={showStatus}
                    showDelete={showStatus}
                    showCheckBox={showStatus}
                    onAdd={() => this.props.history.push(this.state.path + "/score")}
                    onDelete={val => {this.setState({datalist:val})}}
                    onRowClick={(val) => {
                        showStatus && this.props.history.push({
                            pathname: this.state.path + "/score",
                            state: val
                        })
                    }}
                    showDropList={false}
                    emptyComponent={<Empty title={getLabel(83553, "暂无数据")}></Empty>}
                /></div>
                <Route
                    key="programView-score-edit1"
                    path={this.state.path + "/score"}
                    render={() => (
                        <RouteLayout>
                            <ScoreEdit onCallBack={(v,v_id)=>this.setDataList(v,v_id)}/>
                        </RouteLayout>
                    )}
                />
                <Route
                    key="programItem-detail1"
                    path={this.state.path + "/template"}
                    render={() => (
                        <RouteLayout>
                            <div className="wm-route-layout">
                                <ProgramItemDetail updateListData={updateScoreData}/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <RouteLayout.ButtonGroup data={this.getButton()}/>
            </div>
        );
    }

    //获取操作按钮
    getButton = () => {
        return [{
            key: "cancel",
            text: getLabel(31129, "取消"),
            onClick: () => this.props.history.go(-1),
        }, {
            key: "save",
            text: getLabel(30986, "保存"),
            onClick: () => this.handleSave(),
            type: "primary",
        }];
    }

    //保存操作
    handleSave = () => {
        const {datalist,scoreids,scoreattr} = this.state;
        if(datalist && datalist.length>0){
            let {form:{accessScoreData},currentorder} = this.store;
            if(datalist.some(item => accessScoreData.find(element => scoreids.indexOf(","+item.checkuserid+",")==-1 && element.checkuserid == item.checkuserid))){
                Bubble.warning(getLabel(509118, '评分人已存在!'));
                return;
            }
            let newdetailList =[];
            datalist.forEach(item =>{
                item.scoreattr = scoreattr[0];
                item.newexeorder = parseInt(currentorder)+1;
            })
            if(scoreids!=""){//编辑
                let _index = -1;
                accessScoreData && accessScoreData.length>0 && accessScoreData.map((element,idx)=>{
                    if(scoreids.indexOf(","+element.checkuserid+",")>-1){
                        if(_index==-1){
                            _index = idx;
                            newdetailList = newdetailList.concat(datalist);
                        }
                    }else{
                        newdetailList.push(element);
                    }
                });
            }else{//新增
                newdetailList = accessScoreData.concat(datalist);
            }
            this.store.setAccessScoreDate(newdetailList);
        }
        this.props.history.go(-1)
    };
}